<template>
  <div class="">
    <div>圆的半径是：</div>
    <input v-model="circleR" type="number" />
    <div>周长结果：{{ circleLength }}</div>
    <div>面积结果：{{ circleArea }}</div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      circleR: '',
      circleLength: '',
      circleArea: '',
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    changeCircleR() {
      let computedVals = this.computedCircle(this.circleR);
      this.circleLength = computedVals[0];
      this.circleArea = computedVals[1];
    },
    computedCircle(r) {
      if (!r && r !== 0 && r !== '0') {
        return ['', ''];
      }
      let π = 3.1415926;
      let width = 2 * π * r;
      let area = π * r * r;
      return [width, area];
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
input {
  width: 100%;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  padding: 0 5px;
  -webkit-appearance: none;
  background-image: none;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  outline: none;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: visible;
}
</style>
